<template>
  <div class="tab-container">
    <el-tabs v-model="activeName" style="margin-top:30px;" type="border-card">
      <el-tab-pane key="ApplyManage" label="报名管理" name="ApplyManage">
        <apply></apply>
      </el-tab-pane>
      <el-tab-pane key="OutlineManage" label="大纲管理" name="OutlineManage">
        <outline></outline>
      </el-tab-pane>
      <el-tab-pane key="StudentManage" label="学员管理" name="StudentManage">
        <student></student>
      </el-tab-pane>
    </el-tabs>
  <router-view></router-view>
  </div>
</template>
<script>
import apply from '@/views/item/apply/index'
import outline from '@/views/item/outline/index'
import student from '@/views/item/student/index'

export default {


  data() {
    return {
      tabMapOptions: [
        { label: '报名管理', key: 'ApplyManage' },
        { label: '大纲管理', key: 'OutlineManage' },
        { label: '学员管理', key: 'StudentManage' }
      ],
        activeName: 'ApplyManage'
    }
  },
  // 注册组件
  components: {
    apply, outline, student
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}&itemId=`+this.$route.query.itemId)
    }
  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>
  .tab-container {
    margin: 13px;
  }
</style>
